<template>
  <div id="loopContainer">
    <button @click="toLoop">点我模拟</button>
  </div>
</template>

<script>
export default {
  name: "Loop",
  data() {
    return {
      userInfo: ["a1", "a2", "a3", "a4", "a5", "a6"],
      errArr: [],
      sucArr: []
    };
  },
  methods: {
    toLoop() {
      let { userInfo, errArr, sucArr } = this;
      userInfo.forEach(async item => {
        try {
          const result = await new Promise((resolve, reject) => {
            setTimeout(() => {
              //失败模拟

              if (item === "a4") {
                reject(item);
              } else {
                //成功模拟
                sucArr.push(item);
                resolve(item);
              }
            }, 1000);
          });
        } catch (error) {
          errArr.push(item);
        }
      });
    }
  },
  computed: {
    arrLength: {
      get() {
        alert("1");
        return this.sucArr.length;
      },
      set: newValue => {
        console.log(newValue);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
#loopContainer
    width 500px
    height 500px
    border: 2px solid black
    button
      margin: 20px
</style>
